<template>
  <div>
    <aside v-if="toc.length" class="sticky top-0 pt-24 -mt-24">
      <h3 class="mb-2 text-gray-500 uppercase tracking-wider font-bold">
        {{ $t('toc.title') }}
      </h3>
      <nav>
        <scrollactive
          highlight-first-item
          active-class="text-primary-500"
          :offset="0"
          tag="ul"
        >
          <li
            v-for="link of toc"
            :key="link.id"
            class="text-gray-700 dark:text-gray-300"
            :class="{
              'border-t border-dashed dark:border-gray-800 first:border-t-0':
                link.depth === 2,
            }"
          >
            <a
              :href="`#${link.id}`"
              class="block text-sm scrollactive-item transition-transform ease-in-out duration-300 transform hover:translate-x-1"
              :class="{
                'py-2': link.depth === 2,
                'ml-2 pb-2': link.depth === 3,
              }"
              >{{ link.text }}</a
            >
          </li>
        </scrollactive>
      </nav>
    </aside>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'CompToc',
  props: {
    toc: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    ...mapGetters(['settings']),
  },
}
</script>
